// import React, {useState} from "react";
// import {ThemeContext} from "../../context/ThemeContext";
// import Frequency from "./Frequency";
// import DataTable from "./DataTable";
// import InputBanner from "./InputBanner/InputBanner";
// import Chart from "./Chart"
// import Trades from "./Trades";
// import Analysis from "./Analysis";
// import Contacts from "./Contacts";
// import {ConfigProvider, Divider} from "antd";
// import { Layout } from "antd";
// const { Header, Sider, Content } = Layout;
// import {
//     MenuFoldOutlined,
//     MenuUnfoldOutlined,
//     UploadOutlined,
//     UserOutlined,
//     VideoCameraOutlined,
//   } from '@ant-design/icons';
// import { Menu } from 'antd';

// const { SubMenu } = Menu;
// const App: React.FC = () => {

//     return (
//         <ConfigProvider
//         theme={{
//             token: {
//                 // colorPrimary:'#00b96b',
//                 lineWidth:1, //分割线宽度
//                 colorSplit:'rgba(61, 86, 111, 0.4)', //分割线颜色配置
//                 // colorPrimary:'#0958d9' //按钮颜色
//         }}}>
//             <Layout className={'layout'}>
//                 <Sider className={'layout'}>
//                     {/* <Menu className={'ant-menu'} theme={'dark'}>

//                         <Menu.Item key={1}>
//                             Trades
//                         </Menu.Item>
//                         <Menu.Item key={2}>
//                             Contacts
//                         </Menu.Item>
//                         <Menu.Item key={4}>
//                             Analysis
//                         </Menu.Item>
//                     </Menu> */}
//                      <Menu 
//                         className={'ant-menu'} 
//                         theme={'dark'}
//                         items={[
//                             {
//                                 key:'/home/trades',
//                                 icon: <UserOutlined />,
//                                 label: <Link to="/home/trades">Trades</Link>,
//                             },
//                             {
//                                 key: '/home/contacts',
//                                 icon: <VideoCameraOutlined />,
//                                 label: <Link to="/home/contacts">Contacts</Link>,
//                             },
//                             {
//                                 key: '/home/settings',
//                                 icon: <UploadOutlined />,
//                                 label: <Link to="/home/settings">Setting</Link>,
//                             },
//                         ]}
                    
//                     />
//                 </Sider>
//                 <Layout>
//                     {/* <Content> */}
//                         {/* <InputBanner />
//                         <Divider />
//                         <Frequency />
//                         <DataTable />
//                         <Chart/> */}
//                         {/* <Outlet/> */}
//                     {/* </Content> */}
//                 </Layout>
            
//             </Layout>

//         </ConfigProvider>
//     )
// }

import React from 'react';
import {Link, Navigate, Outlet, Route, Routes} from "react-router-dom";

import "../css/layout.css"
import "../css/menu.css"

import {UserOutlined, AreaChartOutlined, BankOutlined} from '@ant-design/icons';

import { Layout, Menu } from 'antd';
import Trades from "./components/Trades";
import Login from "./Login";
import Analysis from "./components/Analysis";
import Contacts from "./components/Contacts";

const {  Sider, Content } = Layout;

const App: React.FC = () => {
  // const [collapsed, setCollapsed] = useState(false);
  // const {
  //   token: { colorBgContainer },
  // } = theme.useToken();

//   function openChange() {
//     console.log('OpenChange');
// }

  return (
    <Layout className={'ant-layout'}>
      <Sider
          // trigger={null} collapsible collapsed={collapsed}
      >
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
                key:'/home/trades',
                icon: <BankOutlined />,
                label: <Link to="/home/trades">Trades</Link>,
            },
            {
                key: '/home/contacts',
                icon: <UserOutlined />,
                label: <Link to="/home/contacts">Contacts</Link>,
            },
            {
                key: '/home/analysis',
                icon: <AreaChartOutlined />,
                label: <Link to="/home/analysis">Analysis</Link>,
            },
        ]}
        // onOpenChange={() => openChange()}
        />
      </Sider>

      <Layout>
        {/*<Header style={{ padding: 0, background: colorBgContainer }}>*/}
        {/*  <Button*/}
        {/*    type="text"*/}
        {/*    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}*/}
        {/*    onClick={() => setCollapsed(!collapsed)}*/}
        {/*    style={{*/}
        {/*      fontSize: '16px',*/}
        {/*      width: 64,*/}
        {/*      height: 64,*/}
        {/*    }}*/}
        {/*  />*/}
        {/*</Header>*/}
        <Content>
          <Outlet/>
            <Routes>
                <Route path="/home/trades" element={<Trades/>} />
                <Route path="/home/contacts" element={<Contacts/>} />
                <Route path="/home/analysis" element={<Analysis/>} />

            </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;